<script setup lang="ts">
import { get, loadFile, post, Message, message, download, formatEnum } from '@/utils'
import RefundModal from './components/RefundModal.vue'
import { LogisticsType, RefundOrderStatus, RefundMoneyStatus, OrderStatus } from '@/enum/order'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import ViewOrder from './components/ViewOrder.vue'
import ViewAfterInfo from './components/ViewAfterInfo.vue'
import { BtnPermission } from '@/enum/permission'
import useValueEnum from '@/hooks/useValueEnum'
const { store } = useModal()
const { store: viewStore } = useModal()
const { store: viewInfoStore } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({ sellerId: '' })
const formRef = ref()
const actionRef = ref()
const payment = id => {
  post({ url: '/server-shop/admin/order/refund/pay', data: { id } }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = {
      ...params,
      size: params.pageSize,
      createTimeBegin: params.createTime ? params.createTime[0] + ' 00:00:00' : '',
      createTimeEnd: params.createTime ? params.createTime[1] + ' 23:59:59' : '',
    }
    Reflect.deleteProperty(query, 'pageSize')
    Reflect.deleteProperty(query, 'createTime')
    get(
      {
        url: '/server-shop/admin/order/refund/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const { valueEnum: seller } = useValueEnum('/server-shop/admin/seller/list')

const columns = formatColumns([
  {
    title: '商品图片',
    dataIndex: 'img',
    valueType: 'image',
    width: 100,
  },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    width: 200,
  },
  {
    title: '售后订单号',
    hideInSearch: false,
    dataIndex: 'refundNo',
    width: 200,
  },
  {
    title: '订单号',
    hideInSearch: false,
    dataIndex: 'orderNo',
    slotName: 'orderNo',
    width: 200,
  },
  {
    title: '归属商户',
    dataIndex: 'sellerId',
    width: 200,
    valueEnum: seller,
    hideInSearch: false,
  },

  {
    title: '售后类型',
    dataIndex: 'refundType',
    hideInSearch: false,
    width: 100,
    valueEnum: {
      1: { text: '退款' },
      2: { text: '退货退款' },
    },
  },

  {
    title: '售后状态',
    hideInSearch: false,
    dataIndex: 'refundStatus',
    valueEnum: formatEnum(RefundOrderStatus),
    width: 100,
  },
  {
    title: '售后退款状态',
    dataIndex: 'refundMoneyStatus',
    valueEnum: formatEnum(RefundMoneyStatus),
    width: 200,
  },

  {
    title: '退款时间',
    dataIndex: 'refundTime',
    width: 200,
  },

  {
    title: '退款金额',
    dataIndex: 'refundMoney',
    width: 100,
    valueType: 'money',
  },
  {
    title: '退款数量',
    dataIndex: 'goodsNum',
    width: 100,
  },
  {
    title: '退款余额',
    dataIndex: 'returnDeductMoney',
    width: 100,
  },
  {
    title: '退款积分',
    dataIndex: 'returnDeductIntegral',
    width: 100,
  },
  {
    title: '物流类型',
    dataIndex: 'logisticsType',
    width: 100,
    valueEnum: formatEnum(LogisticsType),
  },
  {
    title: '用户昵称',
    dataIndex: 'userNickName',
    width: 100,
  },
  {
    title: '用户电话',
    dataIndex: 'userMobile',
    width: 200,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    hideInSearch: false,
    width: 200,
  },

  {
    title: '操作',
    dataIndex: 'operations',
    width: 180,
    fixed: 'right',
    btnList: [
      {
        name: '查看',
        permission: BtnPermission.查看,
        handle: ({ record }) => viewInfoStore.handleShow(record),
      },
      {
        name: '审核',
        permission: BtnPermission.审核,
        disabled: ({ record }) => ![RefundOrderStatus.用户寄回, RefundOrderStatus.待审核].includes(record.refundStatus),
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '重新打款',
        permission: BtnPermission.编辑,
        hidden: ({ record }) => record.refundMoneyStatus != RefundMoneyStatus.退款失败,
        handle: ({ record }) => payment(record.id),
      },
    ],
  },
])

/**导出 */
const onExcel = () => {
  const query = {
    ...searchQuery,
    ...formRef.value.model,
  }

  console.log('🚀 ~ onExcel ~ formRef.value:', formRef.value.model)
  if (formRef.value.model?.createTime?.length) {
    query.createTimeBegin = formRef.value.model.createTime?.[0] + ' 00:00:00'
    query.createTimeEnd = formRef.value.model.createTime?.[1] + ' 23:59:59'
  }
  download('/server-shop/admin/order/refund/excel', query)
}
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title=" " :scroll="{ x: 1000 }" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button @click="onExcel" class="mb10" type="primary" v-permission="[BtnPermission.查看]">
          <template #icon>
            <icon-download />
          </template>
          导出订单
        </a-button>
      </template>

      <template #goodsName="{ record }">
        {{ record.goods.name }}
      </template>
      <template #img="{ record }">
        <a-image :src="record.goods.img" width="30"></a-image>
      </template>
      <template #orderNo="{ record }">
        <a-button type="text" size="small" @click="viewStore.handleShow({ id: record.orderId })">{{ record.orderNo }}</a-button>
      </template>
    </ProTable>
    <RefundModal :info="store.info" v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" />
    <ViewOrder v-if="viewStore.show" v-model:show="viewStore.show" :id="viewStore.id" />
    <ViewAfterInfo v-if="viewInfoStore.show" v-model:show="viewInfoStore.show" :id="viewInfoStore.id" />
  </div>
</template>
